package myJs.login

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.all._
import myJs.api.Api
import myJs.cps._
import myJs.myPkg.Hooks._
import myJs.myPkg.jquery._
import myJs.myPkg.reactHookForm._
import myJs.tool.Tool
import myJs.user.soft.preprocess.Schema
import shared.pojo.Pojo.LoginUserData
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._

/** Created by yz on 3/11/2020
  */
object Cp {

  type Props = Unit

  val Component = ScalaFnComponent[Props] { props =>
    val (password, setPassword) = useState("")
    val (email, setEmail) = useState("")
    val useForm = ReactHookForm.useForm(UseFormOptions(mode = "onChange"))

    object FTool {

      def passwordChange = (v: String) => {
        setPassword(v)
      }

      def emailChange = (v: String) => {
        setEmail(v)
      }

      def login = {
        val request = LoginUserData(email = email, password = password)
        Api.login(request).map { response =>
          if (response.valid) {
            $("#form").submit()
          } else {
            $("#error").addClass("error").text(response.message)
          }
          ()
        }
      }

    }

    div(
      FormProvider(
        trigger = useForm.trigger _,
        control = useForm.control,
        formState = useForm.formState,
        setValue = useForm.setValue _,
        watch = useForm.watch _,
        getFieldState = useForm.getFieldState _
      )(
          div(
            className := "form-group layui-form-item",
            height := 50.px,
            div(
              className := "input-icon",
              i(className := "fa fa-envelope-o"),
              PureInputCp.Props(
                placeHolder = "E-mail",
                `type` = "email",
                value = email,
                onChange = FTool.emailChange,
                selfClassName = "form-control layui-input",
                name = "email"
              ).render
            )
          ),
          div(
            className := "form-group layui-form-item",
            div(
              className := "input-icon",
              i(className := "fa fa-lock"),
              PureInputCp.Props(
                placeHolder = "Password",
                `type` = "password",
                value = password,
                onChange = FTool.passwordChange,
                selfClassName = "form-control layui-input",
                name = "password",
                autoComplete = "off"
              ).render
            )
          ),
          div(
            className := "form-group layui-form-item",
            div(
              className := "actions  col-sm-12 layui-input-block",
              paddingLeft := "0px", paddingRight := "0px",
              button(
                `type` := "button",
                className := "btn layui-btn layui-btn-fluid layui-btn-blue",
                id := "search",
                onClick --> FTool.login,
                "Login"
              )
            )
          )
      )
    )

  }

}
